<template>
  <div id="app">
    <app-header class="hide-on-mobile" />
    <main class="main-content">
      <router-view />
    </main>
    
    <music-player />
    
    <nav class="mobile-nav show-on-mobile">
      <div class="nav-background"></div>
      <div class="nav-blur"></div>
      
      <router-link 
        v-for="item in navItems" 
        :key="item.id"
        :to="item.path"
        class="nav-item"
        :class="{ active: $route.path === item.path }"
      >
        <div class="icon-wrapper">
          <i :class="item.icon"></i>
          <div class="icon-glow"></div>
        </div>
        <span class="nav-text">{{ item.text }}</span>
        <div class="active-indicator">
          <div class="indicator-dot"></div>
          <div class="indicator-line"></div>
        </div>
        <div class="tap-effect"></div>
      </router-link>

      <div class="play-button" @click="togglePlayMenu">
        <div class="button-background"></div>
        <i class="iconfont icon-play1"></i>
        <div class="play-menu" :class="{ 'menu-active': isPlayMenuActive }">
          <div class="current-song">
            <img src="https://picsum.photos/50/50?random=1" alt="cover">
            <div class="song-info">
              <h4>当前播放的歌曲</h4>
              <p>歌手名称</p>
            </div>
          </div>
          <div class="play-controls">
            <i class="iconfont icon-prev"></i>
            <i class="iconfont icon-play1"></i>
            <i class="iconfont icon-next"></i>
          </div>
          <div class="progress-bar">
            <div class="progress" style="width: 30%"></div>
          </div>
        </div>
      </div>
    </nav>

    <div class="mini-player show-on-mobile" v-show="!isPlayMenuActive">
      <img src="https://picsum.photos/40/40?random=1" alt="cover" class="mini-cover">
      <div class="mini-info">
        <marquee>正在播放的歌曲名称 - 歌手名称</marquee>
      </div>
      <div class="mini-controls">
        <i class="iconfont icon-play1"></i>
        <i class="iconfont icon-playlist"></i>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from './components/Layout/AppHeader.vue'
import MusicPlayer from './components/MusicPlayer.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    MusicPlayer
  },
  data() {
    return {
      isPlayMenuActive: false,
      navItems: [
        { id: 'home', path: '/', text: '首页', icon: 'iconfont icon-music' },
        { id: 'playlist', path: '/playlist', text: '歌单', icon: 'iconfont icon-musiclist' },
        { id: 'search', path: '/search', text: '搜索', icon: 'iconfont icon-search' },
        { id: 'my-music', path: '/my-music', text: '我的', icon: 'iconfont icon-user' }
      ]
    }
  },
  methods: {
    togglePlayMenu() {
      this.isPlayMenuActive = !this.isPlayMenuActive;
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

html {
  font-size: 16px; /* 基础字体大小 */
}

/* 移动端字体大小响应式 */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f5f5f5;
  color: #333;
  line-height: 1.5;
  overflow-x: hidden; /* 防止水平滚动 */
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem; /* 使用相对单位 */
  padding-bottom: 90px; /* 播放器高度 + 额外空间 */
}

/* 移动端通用样式 */
@media screen and (max-width: 768px) {
  .main-content {
    padding: 0 0.5rem;
    padding-bottom: 140px; /* 播放器 + 底部导航的高度 */
  }
}

/* 添加一些通用的动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 移动端触摸优化 */
@media (hover: none) {
  .clickable {
    cursor: default;
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 文本选择样式 */
::selection {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

/* 移动端长按菜单禁用 */
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 图片拖拽禁用 */
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* 移动端输入框优化 */
input, textarea {
  font-size: 16px; /* 防止 iOS 自动缩放 */
}

/* 响应式布局类 */
.hide-on-mobile {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}

.show-on-mobile {
  display: none !important;
  @media screen and (max-width: 768px) {
    display: block !important;
  }
}

/* 通用网格布局 */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
  }
}

/* 通用弹性布局 */
.flex {
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .flex {
    gap: 0.5rem;
  }
  
  .flex-wrap-mobile {
    flex-wrap: wrap;
  }
  
  .flex-column-mobile {
    flex-direction: column;
  }
}

/* 通用间距类 */
.m-1 { margin: 1rem; }
.p-1 { padding: 1rem; }
.my-1 { margin: 1rem 0; }
.px-1 { padding: 0 1rem; }

@media screen and (max-width: 768px) {
  .m-1 { margin: 0.5rem; }
  .p-1 { padding: 0.5rem; }
  .my-1 { margin: 0.5rem 0; }
  .px-1 { padding: 0 0.5rem; }
}

/* 通用卡片样式 */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .card {
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  }
}

/* 通用按钮样式 */
.btn {
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* 触摸反馈 */
@media (hover: none) {
  .btn:active {
    transform: scale(0.95);
  }
}

/* 优化移动端导航样式 */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.nav-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(10px);
}

.nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  color: #666;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.icon-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.icon-wrapper i {
  font-size: 24px;
  transition: all 0.3s ease;
}

.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,107,107,0.2) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 12px;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.active-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.indicator-dot {
  width: 4px;
  height: 4px;
  background: #ff6b6b;
  border-radius: 50%;
  margin-bottom: 2px;
}

.indicator-line {
  width: 12px;
  height: 2px;
  background: #ff6b6b;
  border-radius: 1px;
}

.tap-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,107,107,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
}

/* 激活状态样式 */
.nav-item.active {
  color: #ff6b6b;
}

.nav-item.active .icon-wrapper i {
  transform: translateY(-2px);
  animation: iconBounce 0.5s ease;
}

.nav-item.active .icon-glow {
  opacity: 1;
  transform: scale(1.5);
}

.nav-item.active .nav-text {
  transform: translateY(2px);
  font-weight: 500;
}

.nav-item.active .active-indicator {
  opacity: 1;
  top: 8px;
}

/* 点击效果 */
.nav-item:active .tap-effect {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* 播放按钮样式 */
.play-button {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 30px;
  border-radius: 25px;
  background: linear-gradient(45deg, #ff6b6b, #ffd93d);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.button-background {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  filter: blur(5px);
  opacity: 0.5;
  z-index: -1;
}

.play-button i {
  color: white;
  font-size: 24px;
  transition: all 0.3s ease;
}

.play-button:active {
  transform: scale(0.95);
}

/* 播放菜单样式 */
.play-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 300px;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.play-menu.menu-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.current-song {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.current-song img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
}

.song-info h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.song-info p {
  font-size: 14px;
  color: #666;
}

.play-controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.play-controls i {
  font-size: 30px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-controls i:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

.progress-bar {
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(to right, #ff6b6b, #ffd93d);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 迷你播放器样式 */
.mini-player {
  position: fixed;
  bottom: calc(65px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.mini-cover {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  margin-right: 10px;
}

.mini-info {
  flex: 1;
  overflow: hidden;
}

.mini-info marquee {
  font-size: 14px;
  color: #333;
}

.mini-controls {
  display: flex;
  gap: 15px;
}

.mini-controls i {
  font-size: 24px;
  color: #666;
  cursor: pointer;
}

/* 动画 */
@keyframes iconBounce {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(-6px); }
}

/* 深式适配 */
@media (prefers-color-scheme: dark) {
  .nav-background {
    background: rgba(30, 30, 30, 0.95);
  }
  
  .nav-item {
    color: #999;
  }
  
  .play-menu {
    background: #222;
  }
  
  .mini-player {
    background: rgba(30, 30, 30, 0.95);
  }
  
  .mini-info marquee {
    color: #fff;
  }
  
  .mini-controls i {
    color: #999;
  }
}

/* 适配 iPhone 底部黑条 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    height: calc(65px + env(safe-area-inset-bottom));
  }
  
  .play-button {
    margin-bottom: calc(30px + env(safe-area-inset-bottom));
  }
  
  .mini-player {
    bottom: calc(65px + env(safe-area-inset-bottom));
  }
}

/* 添加页面切换动画 */
.main-content {
  position: relative;
}

.router-view-transition {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.router-view-enter, .router-view-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.router-view-enter-active {
  position: absolute;
  width: 100%;
}

/* 优化滚动行为 */
html {
  scroll-behavior: smooth;
}

/* 禁用移动端点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 优化字体渲染 */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 添加滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 优化表单元素在移动端的显示 */
input, 
button, 
select, 
textarea {
  font-family: inherit;
  font-size: 16px; /* 防止 iOS 缩放 */
  border-radius: 0; /* 移除 iOS 默认圆角 */
  -webkit-appearance: none; /* 移除默认样式 */
}

/* 优化图片加载 */
img {
  loading: lazy;
}

/* 添加骨架屏样式 */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #f8f8f8 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style> 